---
title: Tailwind CSS List for React - Material Tailwind
description: Customise your web projects with our complex list component for Tailwind CSS and React using Material Design guidelines.
navigation:
  [
    "list",
    "list-with-avatar",
    "list-with-icon",
    "list-with-selected-item",
    "list-with-disabled-item",
    "list-with-link",
    "list-with-badge",
    "list-custom-styles",
    "list-props",
    "list-item-props",
    "list-item-preffix-props",
    "list-item-suffix-props",
    "list-theme",
    "list-theme-object-type",
    "list-theme-customization",
    "more-examples"
  ]
github: list
prev: form
next: menu
---

<DocsTitle href="list">
# Tailwind CSS List - React
</DocsTitle>

Use our responsive Tailwind CSS vertical <Code>List</Code> anywhere on your web app!

A <Code>List</Code> displays a list of items containing images, icons, and text that represents a specific action.

See below our <Code>List</Code> example that you can use in your Tailwind CSS and React project. The examples comes in different styles, so you can adapt them easily to your needs.

<br />

<CodePreview id="list" component={<ListExamples.ListDefault />}>
```jsx
import { List, ListItem, Card } from "@material-tailwind/react";

export function ListDefault() {
  return (
    <Card className="w-96">
      <List>
        <ListItem>Inbox</ListItem>
        <ListItem>Trash</ListItem>
        <ListItem>Settings</ListItem>
      </List>
    </Card>
  );
}
```
</CodePreview>

---

<DocsTitle href="list-with-avatar">
## List With Avatar
</DocsTitle>

You can use the <Code>{`<ListItemPrefix />`}</Code> component to put images or icons before the list item content.

<CodePreview component={<ListExamples.ListWithAvatar />}>
```jsx
import {
  List,
  ListItem,
  ListItemPrefix,
  Avatar,
  Card,
  Typography,
} from "@material-tailwind/react";

export function ListWithAvatar() {
  return (
    <Card className="w-96">
      <List>
        <ListItem>
          <ListItemPrefix>
            <Avatar variant="circular" alt="candice" src="https://docs.material-tailwind.com/img/face-1.jpg" />
          </ListItemPrefix>
          <div>
            <Typography variant="h6" color="blue-gray">
              Tania Andrew
            </Typography>
            <Typography variant="small" color="gray" className="font-normal">
              Software Engineer @ Material Tailwind
            </Typography>
          </div>
        </ListItem>
        <ListItem>
          <ListItemPrefix>
            <Avatar variant="circular" alt="alexander" src="https://docs.material-tailwind.com/img/face-2.jpg" />
          </ListItemPrefix>
          <div>
            <Typography variant="h6" color="blue-gray">
              Alexander
            </Typography>
            <Typography variant="small" color="gray" className="font-normal">
              Backend Developer @ Material Tailwind
            </Typography>
          </div>
        </ListItem>
        <ListItem>
          <ListItemPrefix>
            <Avatar variant="circular" alt="emma" src="https://docs.material-tailwind.com/img/face-3.jpg" />
          </ListItemPrefix>
          <div>
            <Typography variant="h6" color="blue-gray">
              Emma Willever
            </Typography>
            <Typography variant="small" color="gray" className="font-normal">
              UI/UX Designer @ Material Tailwind
            </Typography>
          </div>
        </ListItem>
      </List>
    </Card>
  );
}
```
</CodePreview>

---

<DocsTitle href="list-with-icon">
## List With Icon
</DocsTitle>

You can use the <Code>{`<ListItemSuffix />`}</Code> component to put images or icons after the list item content.

<CodePreview component={<ListExamples.ListWithIcon />}>
```jsx
import {
  List,
  ListItem,
  ListItemSuffix,
  Card,
  IconButton,
} from "@material-tailwind/react";

function TrashIcon() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="currentColor"
      className="h-5 w-5"
    >
      <path
        fillRule="evenodd"
        d="M16.5 4.478v.227a48.816 48.816 0 013.878.512.75.75 0 11-.256 1.478l-.209-.035-1.005 13.07a3 3 0 01-2.991 2.77H8.084a3 3 0 01-2.991-2.77L4.087 6.66l-.209.035a.75.75 0 01-.256-1.478A48.567 48.567 0 017.5 4.705v-.227c0-1.564 1.213-2.9 2.816-2.951a52.662 52.662 0 013.369 0c1.603.051 2.815 1.387 2.815 2.951zm-6.136-1.452a51.196 51.196 0 013.273 0C14.39 3.05 15 3.684 15 4.478v.113a49.488 49.488 0 00-6 0v-.113c0-.794.609-1.428 1.364-1.452zm-.355 5.945a.75.75 0 10-1.5.058l.347 9a.75.75 0 101.499-.058l-.346-9zm5.48.058a.75.75 0 10-1.498-.058l-.347 9a.75.75 0 001.5.058l.345-9z"
        clipRule="evenodd"
      />
    </svg>
  );
}

export function ListWithIcon() {
  return (
    <Card className="w-96">
      <List>
        <ListItem ripple={false} className="py-1 pr-1 pl-4">
          Item One
          <ListItemSuffix>
            <IconButton variant="text" color="blue-gray">
              <TrashIcon />
            </IconButton>
          </ListItemSuffix>
        </ListItem>
        <ListItem ripple={false} className="py-1 pr-1 pl-4">
          Item Two
          <ListItemSuffix>
            <IconButton variant="text" color="blue-gray">
              <TrashIcon />
            </IconButton>
          </ListItemSuffix>
        </ListItem>
        <ListItem ripple={false} className="py-1 pr-1 pl-4">
          Item Three
          <ListItemSuffix>
            <IconButton variant="text" color="blue-gray">
              <TrashIcon />
            </IconButton>
          </ListItemSuffix>
        </ListItem>
      </List>
    </Card>
  );
}
```
</CodePreview>

---

<DocsTitle href="list-with-selected-item">
## List With Selected Item
</DocsTitle>

You can make a list item selected by default using the <Code>selected</Code> prop for the <Code>{`<ListItem />`}</Code> component.

<CodePreview component={<ListExamples.ListWithSelectedItem />}>
```jsx
import React from "react";
import { List, ListItem, Card } from "@material-tailwind/react";

export function ListWithSelectedItem() {
  const [selected, setSelected] = React.useState(1);
  const setSelectedItem = (value) => setSelected(value);

  return (
    <Card className="w-96">
      <List>
        <ListItem selected={selected === 1} onClick={() => setSelectedItem(1)}>
          Inbox
        </ListItem>
        <ListItem selected={selected === 2} onClick={() => setSelectedItem(2)}>
          Trash
        </ListItem>
        <ListItem selected={selected === 3} onClick={() => setSelectedItem(3)}>
          Settings
        </ListItem>
      </List>
    </Card>
  );
}
```
</CodePreview>

---

<DocsTitle href="list-with-disabled-item">
## List With Disabled Item
</DocsTitle>

You can make a list item disabled using the <Code>disabled</Code> prop for the <Code>{`<ListItem />`}</Code> component.

<CodePreview component={<ListExamples.ListWithDisabledItem />}>
```jsx
import { List, ListItem, Card } from "@material-tailwind/react";

export function ListWithDisabledItem() {
  return (
    <Card className="w-96">
      <List>
        <ListItem disabled={true}>Inbox</ListItem>
        <ListItem>Trash</ListItem>
        <ListItem>Settings</ListItem>
      </List>
    </Card>
  );
}
```

</CodePreview>

---

<DocsTitle href="list-with-link">
## List With Link
</DocsTitle>

Display a collection of options that are clickable and lead to different pages with our simple and versatile list example.

<CodePreview component={<ListExamples.ListWithLink />}>
```jsx
import { List, ListItem, Card } from "@material-tailwind/react";

export function ListWithLink() {
  return (
    <Card className="w-96">
      <List>
        <a href="#" className="text-initial">
          <ListItem>Inbox</ListItem>
        </a>
        <a href="#" className="text-initial">
          <ListItem>Trash</ListItem>
        </a>
        <a href="#" className="text-initial">
          <ListItem>Settings</ListItem>
        </a>
      </List>
    </Card>
  );
}
```
</CodePreview>

---

<DocsTitle href="list-with-badge">
## List With Badge
</DocsTitle>

This example is similar to the previous list component, but it also includes badges to present more information about the options (for example, the quantity).

<CodePreview component={<ListExamples.ListWithBadge />}>
```jsx
import {
  List,
  ListItem,
  ListItemSuffix,
  Chip,
  Card,
} from "@material-tailwind/react";

export function ListWithBadge() {
  return (
    <Card className="w-96">
      <List>
        <ListItem>
          Inbox
          <ListItemSuffix>
            <Chip
              value="14"
              variant="ghost"
              size="sm"
              className="rounded-full"
            />
          </ListItemSuffix>
        </ListItem>
        <ListItem>
          Spam
          <ListItemSuffix>
            <Chip
              value="2"
              variant="ghost"
              size="sm"
              className="rounded-full"
            />
          </ListItemSuffix>
        </ListItem>
        <ListItem>
          Trash
          <ListItemSuffix>
            <Chip
              value="40"
              variant="ghost"
              size="sm"
              className="rounded-full"
            />
          </ListItemSuffix>
        </ListItem>
      </List>
    </Card>
  );
}
```
</CodePreview>

---

<DocsTitle href="list-custom-styles">
## List Custom Styles
</DocsTitle>

You can use the <Code>className</Code> prop to add custom styles to the <Code>List</Code>, <Code>ListItem</Code>, <Code>ListItemPrefix</Code> and <Code>ListItemSuffix</Code> components.

<CodePreview component={<ListExamples.ListCustomStyles />}>
```jsx
import {
  List,
  ListItem,
  ListItemPrefix,
  ListItemSuffix,
  Chip,
  Card,
} from "@material-tailwind/react";

export function ListCustomStyles() {
  return (
    <Card className="w-96 overflow-hidden rounded-md">
      <List className="my-2 p-0">
        <ListItem className="group rounded-none py-1.5 px-3 text-sm font-normal text-blue-gray-700 hover:bg-blue-500 hover:text-white focus:bg-blue-500 focus:text-white">
          <ListItemPrefix>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              strokeWidth={1.5}
              stroke="currentColor"
              className="h-4 w-4"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M9 3.75H6.912a2.25 2.25 0 00-2.15 1.588L2.35 13.177a2.25 2.25 0 00-.1.661V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 00-2.15-1.588H15M2.25 13.5h3.86a2.25 2.25 0 012.012 1.244l.256.512a2.25 2.25 0 002.013 1.244h3.218a2.25 2.25 0 002.013-1.244l.256-.512a2.25 2.25 0 012.013-1.244h3.859M12 3v8.25m0 0l-3-3m3 3l3-3"
              />
            </svg>
          </ListItemPrefix>
          Inbox
          <ListItemSuffix>
            <Chip
              value="+99"
              variant="ghost"
              size="sm"
              className="rounded-full px-2 py-1 text-xs group-hover:bg-white/20 group-hover:text-white"
            />
          </ListItemSuffix>
        </ListItem>
        <ListItem className="rounded-none py-1.5 px-3 text-sm font-normal text-blue-gray-700 hover:bg-blue-500 hover:text-white focus:bg-blue-500 focus:text-white">
          <ListItemPrefix>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              strokeWidth={1.5}
              stroke="currentColor"
              className="h-4 w-4"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
              />
            </svg>
          </ListItemPrefix>
          Trash
        </ListItem>
        <ListItem className="rounded-none py-1.5 px-3 text-sm font-normal text-blue-gray-700 hover:bg-blue-500 hover:text-white focus:bg-blue-500 focus:text-white">
          <ListItemPrefix>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              strokeWidth={1.5}
              stroke="currentColor"
              className="h-4 w-4"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"
              />
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
              />
            </svg>
          </ListItemPrefix>
          Settings
        </ListItem>
      </List>
    </Card>
  );
}
```
</CodePreview>

---

<DocsTitle href="list-props">
## List Props
</DocsTitle>

The following props are available for list component. These are the custom props
that we've added for the list component and you can use all the other native props
as well.

| Attribute   | Type                | Description                   | Default                                |
| ----------- | ------------------- | ----------------------------- | -------------------------------------- |
| `className` | <Code>string</Code> | Add custom className for list | `''`                                   |
| `children`  | <Code>node</Code>   | Add content for list          | No default value it's a required prop. |

<br />
<br />

### For TypeScript Only

```tsx
import type { ListProps } from "@material-tailwind/react";
```

---

<DocsTitle href="list-item-props">
## List Item Props
</DocsTitle>

The following props are available for list item component. These are the custom props
that we've added for the list item component and you can use all the other native
props as well.

| Attribute   | Type                 | Description                             | Default                                |
| ----------- | -------------------- | --------------------------------------- | -------------------------------------- |
| `ripple`    | <Code>boolean</Code> | Add ripple effect for list item         | <Code>true</Code>                      |
| `selected`  | <Code>boolean</Code> | Makes the list item selected by default | <Code>false</Code>                     |
| `disabled`  | <Code>boolean</Code> | Makes the list item disabled            | <Code>false</Code>                     |
| `className` | <Code>string</Code>  | Add custom className for list item      | `''`                                   |
| `children`  | <Code>node</Code>    | Add content for list item               | No default value it's a required prop. |

<br />
<br />

### For TypeScript Only

```tsx
import type { ListItemProps } from "@material-tailwind/react";
```

---

<DocsTitle href="list-item-prefix-props">
## List Item Prefix Props
</DocsTitle>

<span className="scroll-mt-48" />
The following props are available for list item prefix component. These are the custom
props that we've added for the list item prefix component and you can use all the
other native props as well.

| Attribute   | Type                | Description                               | Default                                |
| ----------- | ------------------- | ----------------------------------------- | -------------------------------------- |
| `className` | <Code>string</Code> | Add custom className for list item prefix | `''`                                   |
| `children`  | <Code>node</Code>   | Add content for list item prefix          | No default value it's a required prop. |

<br />
<br />

### For TypeScript Only

```tsx
import type { ListItemPrefixProps } from "@material-tailwind/react";
```

---

<DocsTitle href="list-item-suffix-props">
## List Item Suffix Props
</DocsTitle>

The following props are available for list item suffix component. These are the custom
props that we've added for the list item suffix component and you can use all the
other native props as well.

| Attribute   | Type                | Description                               | Default                                |
| ----------- | ------------------- | ----------------------------------------- | -------------------------------------- |
| `className` | <Code>string</Code> | Add custom className for list item suffix | `''`                                   |
| `children`  | <Code>node</Code>   | Add content for list item suffix          | No default value it's a required prop. |

<br />
<br />

### For TypeScript Only

```tsx
import type { ListItemSuffixProps } from "@material-tailwind/react";
```

---

<DocsTitle href="list-theme">
## List Theme
</DocsTitle>

Learn how to customize the theme and styles for list component, the theme object for list component has two main objects:

**A.** The <Code>defaultProps</Code> object for setting up the default value for props of list component.<br />
**B.** The <Code>styles</Code> object for customizing the theme and styles of list component.<br />

You can customize the theme and styles of list component by adding Tailwind CSS classes as key paired values for objects.

<br />
<br />

<DocsTitle href="list-theme-object-type">
## List Theme Object Type
</DocsTitle>

```ts
interface ListStylesType {
  defaultProps: {
    ripple: boolean;
    className: string;
  };
  styles: {
    base: {
      list: object;
      item: {
        initial: object;
        selected: object;
        disabled: object;
      };
      itemPrefix: object;
      itemSuffix: object;
    };
  };
}
```

<br />
<br />

### For TypeScript Only

```tsx
import { ListStylesType } from "@material-tailwind/react";
```

---

<DocsTitle href="list-theme-customization">
## List Theme Customization
</DocsTitle>

```ts
const theme = {
  list: {
    defaultProps: {
      ripple: true,
      className: "",
    },
    styles: {
      base: {
        list: {
          display: "flex",
          flexDirection: "flex-col",
          gap: "gap-1",
          minWidth: "min-w-[240px]",
          p: "p-2",
          fontFamily: "font-sans",
          fontSize: "text-base",
          fontWeight: "font-normal",
          color: "text-blue-gray-700",
        },
        item: {
          initial: {
            display: "flex",
            alignItems: "items-center",
            width: "w-full",
            padding: "p-3",
            borderRadius: "rounded-lg",
            textAlign: "text-start",
            lightHeight: "leading-tight",
            transition: "transition-all",
            bg: "hover:bg-blue-gray-50 hover:bg-opacity-80 focus:bg-blue-gray-50 focus:bg-opacity-80 active:bg-blue-gray-50 active:bg-opacity-80",
            color: "hover:text-blue-gray-900 focus:text-blue-gray-900 active:text-blue-gray-900",
            outline: "outline-none",
          },
          selected: {
            bg: "bg-blue-gray-50/50",
            color: "text-blue-gray-700",
          },
          disabled: {
            opacity: "opacity-50",
            cursor: "cursor-not-allowed",
            pointerEvents: "pointer-events-none",
            userSelect: "select-none",
            bg: "hover:bg-transparent focus:bg-transparent active:bg-transparent",
            color: "hover:text-blue-gray-500 focus:text-blue-gray-500 active:text-blue-gray-500",
          },
        },
        itemPrefix: {
          display: "grid",
          placeItems: "place-items-center",
          marginRight: "mr-4",
        },
        itemSuffix: {
          display: "grid",
          placeItems: "place-items-center",
          marginRight: "ml-auto justify-self-end",
        },
      },
    },
  },
};
```
---

<DocsTitle href="more-examples">
## Explore More Tailwind CSS Examples
</DocsTitle>

Check out more list examples from <a href="https://www.material-tailwind.com/blocks" target="_blank">Material Tailwind Blocks</a>.
